import React,{MouseEvent, useState,useRef,useEffect} from "react";
import PubSub from "pubsub-js";

import { Ivegetable } from "../../../Frontpage/SpecialOffer";
import style from './index.module.css'
const {shoppingItemBox,shoppingItem,picture,content,moneyMain,discount,add,money,click} = style

interface IvegetableFlag extends Ivegetable {
    flag:boolean,
    NotAllSelected:Function
}

export default function ShoppingItem(props:IvegetableFlag){

    const clickLi = useRef<HTMLLIElement>(null)

    const [quantity,setQuantity] = useState<number>(1)

    useEffect(() => {
        //这里就不应该 自己再 将 quantity 加一了 这里只是全选时要将当前价钱传递给 statistics
        props.flag ?
            passThePrice()
        :
            passThePrice(0,0)
        
    }, [props.flag]) //eslint-disable-line react-hooks/exhaustive-deps
    /*TODO:
        当 useEffect 使用的函数在外部声明或者使用 useState 定义的历史变量 会报 eslint 警告
        在 useEffect 后面加入 eslint-disable-line react-hooks/exhaustive-deps
        就可消除警告
    */

    //amount 控制食品数量是否需要 加一 减一 或者不变
    //isZero 控制 price 是否为 0
    function passThePrice( amount:1 | -1 | 0 = 0,isZero:1 | 0 = 1) {
        PubSub.publish('price',{id:props._id,price:Math.floor(props.price * (quantity + amount) * 100)/100 * isZero,discount:props.memberDiscount})
    }

    function increase(){
        //由于 useState 的更新是异步的 所以 后面的 quantity 是还没有更新的 需要手动 +1
        clickLi.current?.id === click && passThePrice(1)
        setQuantity(quantity + 1)
        
    }

    function reduce(){
        if(quantity <= 1) return
        clickLi.current?.id === click && passThePrice(-1)
        setQuantity(quantity - 1)
        
    }
    function toggle(event:MouseEvent){
        const li = event.currentTarget as HTMLLIElement
        if(li.id === click){
            li.id = ''
            //当 有食物不被选中时 父级的全选按钮 变成为选中状态
            props.NotAllSelected()
            passThePrice(0,0)
        }else{
            li.id = click
            passThePrice()
        }
    }

    return (
        <div className={shoppingItemBox}>
            <ul className={shoppingItem}>
            <li id={props.flag ? click : ''} onClick={toggle} ref={clickLi}/>
            <li>
                <div className={picture} style={{background: `url(${props.address}) no-repeat center`, backgroundSize: 'cover'}}/>
                <div className={content}>
                    <p>{props.name}</p>
                    <div className={moneyMain}>
                        <div>
                            {
                             props.memberDiscount < 10 &&  
                             <p className={discount}>今日会员{props.memberDiscount}折</p>
                            }
                            <p className={money}>
                                <span>¥</span>
                                <span>{Math.floor(props.memberDiscount/10 * props.price * quantity * 100)/100}</span>
                                {
                                    props.memberDiscount < 10 &&
                                    <span>¥{props.price}</span>
                                }
                            </p>
                        </div>
                        <ul className={add}>
                            <li onClick={reduce}/>
                            <li>{quantity}</li>
                            <li onClick={increase}/>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
        </div>
    )
}